<template>
  <div>
    <el-dialog
      title="编辑服务"
      :visible="editTopServiceDialog"
      width="35%"
      @close="close"
    >
      <div>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="140px"
        >
          <el-form-item label="内容名称:" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入内容名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="pageUrlId">
            <el-select v-model="formData.pageUrlId" placeholder="请选择">
              <el-option
                v-for="item in pageTopList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务类型:" prop="serveType">
            <el-select
              v-model="formData.serveType"
              placeholder="请输入跳转类型"
            >
              <el-option label="底部导航栏" :value="1"></el-option>
              <el-option label="首页轮播图" :value="2"></el-option>
              <el-option label="首页小图标" :value="3"></el-option>
              <el-option label="招聘会轮播图" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转参数:" prop="parameter">
            <el-input
              v-model="formData.parameter"
              placeholder="有参数可填写，无参可不填"
            ></el-input>
          </el-form-item>
          <el-form-item label="链接地址:" prop="jumpUrl">
            <el-input
              v-model="formData.jumpUrl"
              placeholder="请输入链接地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加图片:" prop="file">
            <el-upload
              v-model="formData.file"
              action="#"
              list-type="picture"
              :on-preview="handlePreview"
              :auto-upload="false"
              :on-change="handleChange"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :limit="1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png/bmp格式
              </div>
            </el-upload>
          </el-form-item>
          <!-- 按钮 -->
        </el-form>
      </div>
      <div slot="footer">
        <el-button  @click="close">取消</el-button>
        <el-button type="primary" @click="btnOk">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateServeByIdApi, selPageUrlListApi } from "@/api/Jingang_District";
export default {
  props: {
    editTopServiceDialog: {
      type: Boolean,
    },
  },
  data() {
    return {
      formData: {
        id: "",
        name: "",
        serveType: "",
        jumpType: "",
        pageUrlId: "",
        jumpUrl: "",
        file: "",
      },
      imgUrl: "",
      pageTopList: [],
      fileList: [],
      rules: {
        name: [
          { required: true, message: "请输入内容名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "内容名称长度为2-10个字符",
            trigger: "blur",
          },
        ],
        pageUrlId: [
          { required: true, message: "请选择类别", trigger: "change" },
        ],
        serveType: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        jumpType: [
          {
            required: true,
            message: "请选择跳转类型",
            trigger: "change",
          },
        ],
        jumpUrl: [
          {
            required: true,
            message: "请输入链接地址",
            trigger: "blur",
          },
        ],
        file: [
          { required: true, validator: this.validateImage, trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.selPageUrlList();
  },

  methods: {
    async selPageUrlList() {
      const res = await selPageUrlListApi({
        page: 1,
        pageSize: 10,
      });
      console.log(res);
      this.pageTopList = res.records;
    },
    validateImage(rule, value, callback) {
      // 自定义图片校验逻辑
      const isValid = this.fileList.length > 0; // 检验是否有文件被选中
      if (!isValid) {
        callback(new Error("必须上传图片"));
      } else {
        callback();
      }
    },
    close() {
      this.formData = {};
      (this.fileList = []),
        // 通知父组件关闭弹层
        this.$emit("update:editTopServiceDialog", false);
    },
    handlePreview(file) {
      console.log(file);
      this.imgUrlPreview = file.url;
      this.showDialog = true;
    },
    // 选择图片
    handleChange(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.imgurl = file.raw;
      this.fileList = fileList.map((item) => item);
    },
    beforeUpload(file) {
      // 先检查文件类型
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      if (!types.some((item) => item === file.type)) {
        // 如果不存在
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
        return false;
      }
    },
    // 点击确认
    btnOk() {
      this.$refs.formRef.validate(async (valid) => {
        try {
          if (valid) {
            const formData = new FormData();
            formData.append("id", this.formData.id);
            formData.append("name", this.formData.name);
            formData.append("serveType", this.formData.serveType);
            formData.append("jumpUrl", this.formData.jumpUrl);
            formData.append("parameter", this.formData.parameter);
            formData.append("pageUrlId", this.formData.pageUrlId);
            formData.append("file", this.imgurl);
            const res = await updateServeByIdApi(formData, this.formData.id);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("编辑成功!");
              this.$emit("update:editTopServiceDialog", false);
              this.$parent.selServeList();
            } else {
              this.$message.error("编辑失败");
            }
          } else {
            this.$message.error("编辑失败");
            console.log(1);
            this.$emit("update:editTopServiceDialog", false);
          }
        } catch (error) {
          console.log(error);
          console.log(2);
          console.log(this.formData);
          this.$message.error("编辑失败");
          this.$emit("update:editTopServiceDialog", false);
        }
      });
    },
  },
};
</script>

<style scoped></style>
